import React from "react";
import Chart from "echarts-for-react";
import PublicService from '../../../services/PublicService';
import request from '../../../utils/request';

class BladDayEcharts extends React.Component {

    constructor(props) {
        super(props)
        this.state={
            disList:{}
        }

    }


    componentDidMount () {
        console.log(PublicService.getCookie("gasStationName")) 
        let data = {
            gasStationName:PublicService.getCookie("gasStationName"),
            type:1
        }
        request({
            url: `/zhrq-web/gas/gasMonitor/getRunTimeTu`,
            method: 'POST',
            data:data
        }).then(data => {
            // console.log(data)
            if(data.rc === 0) {
                this.setState({
                    disList:data.ret
                })
            }
        })
       
    }
    
   
    
    setOption  = () => {
        let data = this.state.disList
        return {
  
            tooltip : {
                trigger: 'axis'
            },
            toolbox:{
                feature:{
                    saveAsImage:{
                        show:true,
                        title:"导出",
                       
                    }
                }
            },
            xAxis : [
                {
                    data : data.xAxisData,
                   
                }
            ],
            dataZoom: [{
                type: 'slider',
                xAxisIndex: 0,
                filterMode: 'filter',
                start: 0,
                end: 100

            }
                // , {
                //     type: 'slider',
                //     yAxisIndex: 0,
                //     filterMode: 'empty',
                //     start: 0,
                //     end: 100
                // }
                , {
                type: 'inside',
                xAxisIndex: 0,
                filterMode: 'filter',
                start: 0,
                end: 100

            }, {
                type: 'inside',
                yAxisIndex: 0,
                filterMode: 'filter',
                start: 0,
                end: 100

            }],
            yAxis : {
                    type : 'value'
                }
            ,
            series : [
                
                 {
                 
                    type:'line',
                    smooth:true,
                    data:data.seriesData
                }
            ]
        };

        

    }

    render() {
      
        return (

                 <Chart option={this.setOption()} notMerge lazyUpdate style={{height:"70vh"}}
                 echartsInstance={this.save}
                 />
          

         
           
          );
    }
   
}

export default BladDayEcharts;
